<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery.js"></script>
  </head>
  <style>
    table {
      width: 400px;
    }
    td {
      text-align: center;
    }
  </style>
  <body>
    <div>
      姓名：<input type="text" id="username" /> 年龄：<input
        type="text"
        id="age"
      />
      性别：
      <input type="text" id="sex" />
      <button id="sub">确定</button>
    </div>
    <br />
    <br />
    <br />
    姓名：<input type="text" id="keyword" /> <button id="search">搜索</button>
    <br /><br />
    <table border="1">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </body>
  <script>
    var n = 1,
      thisIndex //1：添加新的 2：编辑
    $(function () {
      $('#search').click(function () {
        var keyword = $('#keyword').val(),
          data = getData()
        var searchData = data.filter(function (val) {
          if (val.username.indexOf(keyword) == -1) {
            return false
          } else {
            return true
          }
        })
        showList(searchData)
      })
      showList()
      $('#sub').click(function () {
        var username = $('#username').val(),
          age = $('#age').val(),
          sex = $('#sex').val()
        // let strHtml = `<tr>
        //                 <td>${username}</td>
        //                 <td>${age}</td>
        //                 <td>${sex}</td>
        //                 <td><a href="#">编辑</a>|<a href="#">删除</a></td>
        //               </tr>`
        // $('tbody').append(strHtml)
        var data = {
          username: username,
          age: age,
          sex: sex,
        }
        if (n == 1) {
          setData(data)
        } else {
          var allData = getData()
          allData[thisIndex] = data
          localStorage.setItem('data', JSON.stringify(allData))
        }
        showList()
      })
    })
    function showList(data = false) {
      if (!data) {
        var data = getData()
      }
      if (data.length < 1) {
        $('tbody').html('')
        return
      }
      var strHtml = ''
      for (let i in data) {
        strHtml += `<tr>
                        <td>${data[i].username}</td>
                        <td>${data[i].age}</td>
                        <td>${data[i].sex}</td>
                        <td><a href="#" onclick=edit(${i})>编辑</a> | <a href="#" onclick=del(${i})>删除</a></td>
                      </tr>`
      }
      $('tbody').html(strHtml)
    }
    //删除
    function del(index) {
      var data = getData()
      console.log(index)
      data.splice(index, 1)
      localStorage.setItem('data', JSON.stringify(data))
      showList()
    }
    //编辑
    function edit(index) {
      n = 2
      var data = getData()
      thisIndex = index
      $('#username').val(data[index].username)
      $('#age').val(data[index].age)
      $('#sex').val(data[index].sex)
    }
    function getData() {
      var data = localStorage.getItem('data')
      data = data == null ? [] : JSON.parse(data)
      return data
    }
    //设置本地存储数据
    function setData(data) {
      var allData = getData()
      if (allData.length > 0) {
        allData.unshift(data)
        localStorage.setItem('data', JSON.stringify(allData))
      } else {
        localStorage.setItem('data', JSON.stringify([data]))
      }
    }
  </script>
</html>
